<!-- 最新新闻 -->
<template>
  <div class="host_news">
    <myheader title="新闻详情" rightBtn="主页" @updataInfo="submitRecruit"></myheader>

    <!-- 头部滚动栏  -->
    <van-tabs
      :active="active"
      @change="seleteType"
      v-if="tabs.length>0"
      style="padding: 0.13333rem 0.26667rem 0.13333rem 0.26667rem;"
    >
      <van-tab v-for="(item,index) in tabs" :title="item.name " :key="index"></van-tab>
    </van-tabs>
    <van-skeleton style="margin-top:46px;" title :row="14" v-if="news.length == 0" />
    <van-pull-refresh
      v-else
      v-model="loading"
      success-text="刷新成功"
      :head-height="80"
      @refresh="onRefresh"
      style="padding: 0.13333rem 0.26667rem 0.13333rem 0.26667rem;"
    >
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://img.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>
      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
      </template>
      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
      </template>
      <!-- 新闻内容 -->
      <ul class="news_ul" v-for="(item,index) in news" :key="index">
        <van-image :src="item.imgsrc" class="swip_img" fit="contain">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>

        <div class="news_ul_div2" @click="goDetial(index)">
          <li class="title">{{item.title}}</li>
          <li class="tip">
            <a @click="goDetial(index)">详情</a>
          </li>
          <li class="date">
            作者:{{item.source}}
            <br />
            时间:{{item.time}}
          </li>
        </div>
      </ul>
    </van-pull-refresh>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
export default {
  components: { myheader },

  data() {
    return {
      tabs: [], //头部列表
      news: [], // 新闻列表
      newsId: 0, // 新闻id
      active: this.$route.params.active, // 滚动栏激活页面
      page: 1, // 第几页的数据
      loading: false, // 下拉刷新
    }
  },

  mounted() {
    this.getTabs()
    this.getNews()
    this.active = this.$route.params.active
  },
  methods: {
    async getTabs() {
      const res = await this.$axios.get(
        'https://v2.alapi.cn/api/new/toutiao/type',
        {
          params: {
            token: this.$path.ALAPI_TOKEN,
          },
        }
      )
      if (res.data.code == 200) {
        this.tabs = res.data.data
      }
    },
    // 获取选择的类型
    seleteType(index) {
      this.news = []
      this.active = index
      this.getNews()
      this.$router.push('/hotNews/' + this.active)
    },

    async getNews() {
      let type = parseInt(this.active) + 1
      console.log(type)
      const res = await this.$axios.get('https://v2.alapi.cn/api/new/toutiao', {
        params: {
          type: type.toString(),
          page: this.page.toString(),
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if ((res.data.code = 200)) {
        this.news = res.data.data
      }
    },
    // 下拉刷新
    onRefresh() {
      this.loading = false
      this.page++
      this.getNews()
    },
    goDetial(index) {
      this.newsId = this.news[index].docid
      this.$router.push('/hotNewsDetail/' + this.newsId + '/' + this.active)
    },
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.host_news {
  margin-top: 46px;
}
.news {
  margin-top: 10px;
}
.news_div {
  margin-bottom: 10px;
  position: relative;
  margin-right: 10px;
  box-sizing: border-box;
  font-size: 16px;
}
.news_div:before {
  display: block;
  height: 100%;
  width: 2px;
  content: ' ';
  background-color: red;
  position: absolute;
  /* top: 100; */
  left: -8px;
  transform: translate(50%, 0%);
}

.news_ul {
  padding: 10px 0 10px 0;
  border-top: #eeeeee 1px solid;
  border-bottom: #eeeeee 1px solid;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  position: relative;
}
.news_ul_div > img {
  width: 100px;
  height: 100%;
}
.title {
  width: 100%;
  font-size: 0.45rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.date {
  font-size: 12px;
}
.news_ul_div2 {
  padding-left: 10px;

  box-sizing: border-box;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tip {
  font-size: 0.42667rem;
  text-align: right;
  margin-right: 0.45333rem;
  color: #1989fa !important;
  font-size: 12px;
  position: absolute;
  right: -0.4rem;
  bottom: 0.8rem;
}
.swip_img {
  width: 39% !important;
}
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>
